import { observer } from 'mobx-react'
import styles from './index.module.less'
import { Form, TextArea, Toast } from 'antd-mobile'
import career from '@/resource/careerEdit/career.png'
import store from '../../store'

const CareerIntroduce = (props: any) => {
    const { data, changeNameList } = props
    const { setFillInList, submitFiveFingerCharts } = store || {}
    const [form] = Form.useForm()
    const fillIn = (v: string, i: number) => {
        let arr = [...data]
        arr[i].feature = v
        changeNameList([...arr])
    }
    /** 提交 */
    const onSubmit = () => {
        form.validateFields()
            .then(() => {
                setFillInList(data)
                submitFiveFingerCharts()
            })
            .catch(() => {
                Toast.show('请输入喜欢该职业的原因或特征')
            })
    }
    //表单底部结构
    const footerNode = () => {
        return (
            <div className={styles.footer} onClick={onSubmit}>
                <span>生成我的五指图</span>
            </div>
        )
    }
    return (
        <div className={styles.page}>
            <div className={styles.content}>
                <Form footer={footerNode()} form={form}>
                    {data.map((item: { name: string; feature: string }, index: number) => {
                        return (
                            <div className={styles.block_wrapper} key={`text_${index}`}>
                                <div className={styles.block_title}>
                                    <img src={career} />
                                    <span>{item.name}</span>
                                </div>
                                <div className={styles.text_area_wrapper}>
                                    <Form.Item
                                        name={`text_${index}`}
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入喜欢该职业的原因或特征',
                                            },
                                        ]}
                                    >
                                        <TextArea placeholder="请输入喜欢该职业的原因或特征" rows={3} maxLength={30} onChange={v => fillIn(v, index)} />
                                    </Form.Item>
                                </div>
                            </div>
                        )
                    })}
                </Form>
            </div>
        </div>
    )
}

export default observer(CareerIntroduce)
